.special-main{
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    margin-bottom: 40px;
    position: relative;
    .good-list{
        ul{
            height: auto;
            padding:40px;
            overflow: hidden;
            li{
                float: left;
                width: 50%;
                .item{
                    background-color: #fff;
                    border-bottom: 1px solid #e1e1e1;
                    margin: 0 30px 30px 30px;
                    .thumb{
                        height: 250px;
                        position: relative;
                        a{
                            display: block;
                            max-height: 250px;
                            overflow: hidden;
                            img{
                                display: block;
                                margin: auto;
                            }
                        }
                        .read-more{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            background-color: #000;
                            opacity: 0;
                            transition: opacity 0.5s;
                            .icon{
                                width: 80px;
                                height: 80px;
                                position: absolute;
                                font-size: 30px;
                                color: #fff;
                                line-height: 75px;
                                left: 50%;
                                top: 50%;
                                margin: -40px 0 0 -40px;
                                border-radius: 100%;
                                text-align: center;
                                border: 2px solid #fff;
                                transition: transform 0.5s;
                                i:before{
                                    content: "\f064";
                                }
                            }
                        }
                        .activity{
                            position: absolute;
                            width: 90px;
                            height: 90px;
                            top: -5px;
                            left: -5px;
                            background:url(../img/activity-status.png) no-repeat;
                        }
                    }
                    .title{
                        h2{
                            font-size: 14px;
                            margin: 20px auto 10px auto;
                            position: relative;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                         
                            a{
                                color: #666;
                            }
                            time{
                                position: absolute;
                                right: 0px;
                                color: #999;
                                font-size: 12px;
                            }
                        }
                        
                    }
                    &:hover .read-more{
                        opacity: 0.7;
                    }
                    &:hover .icon{
                        transform: rotate(20deg);
                    }
                    &:hover .title a{
                        color: #00C3B6;
                    }
                }
            }
    }
  }
  
}

@media only screen and(max-width:1260px){
    .special-main{
        .good-list{
            ul{
                li{
                    .item{
                        .thumb{
                            height: auto;
                        }
                        .title{
                            h2{
                                time{
                                     position: relative;
                                     margin-top: 5px;
                                     display: block;
                                }
                            }
                           
                        }
                    }
                }
            }
        }
      }
   
}


@media only screen and (max-width:768px){
    .special-main{
        .good-list{
            ul{
                li{
                    width: 100%;
                }
            }
        }
      }
}
@media only screen and (max-width:500px){
    .special-main{
        .good-list{
            ul{
                padding:10px ;
                li{
                    .item{
                        margin: 0 0 15px 0;
                        border-bottom:0 none ;
                    }
                }
            }
        }
      }
}
